<template>
  <div class="world-reader">
    <div class="chapter-scroller-wrap">
      <cube-scroll
        ref="contentScroll"
        :data="chapters"
        :options="options"
        @pulling-up="onPullingUp">
        <ul class="chapter-content-wrapper">
          <li v-for="(item, index) in chapters" :key="index" class="chapter-content-item">
            <h4 class="chapter-content-title">{{item.chapterTitle}}</h4>
            <div class="chapter-content-content" v-html="item.chapterContent"></div>
          </li>
        </ul>
      </cube-scroll>
    </div>
  </div>
</template>

<script>
  import req from '@/fetch/api.js'
  import mock from '@/mock/chapters.json'

  const mockChapters = []

  function replaceContent (chapter) {
    chapter.chapterContent = chapter.chapterContent.replace(/ /g, '<p>')
  }

  mock.chapters.forEach(item => {
    replaceContent(item)
    mockChapters.push(item)
  })

  export default {
    data () {
      return {
        chapters: mockChapters,
        options: {
          pullUpLoad: true
        },
        secondStop: 26
      }
    },
    methods: {
      onPullingUp () {
        console.log('pulling up')
        // 模拟更新数据
        setTimeout(() => {
          // 如果有新数据
          // this.chapters.push(mockChapters[0])
          req.searchChapter(this.$route.query).then((response) => {
            if (response.status === 200) {
              if (response.data.code === 200) {
                replaceContent(response.data.data)
                this.chapters.push(response.data.data)
                return
              }
            }
            this.$refs.contentScroll.forceUpdate()
          })
        }, 1000)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .world-reader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .chapter-scroller-wrap {
    position: absolute;
    width: 98%;
    height: 98%;
    top: 1%;
    left: 1%;
  }

  .chapter-content-wrapper {

  }

  .chapter-content-item {

  }

  .chapter-content-item .chapter-content-title {
    font-size: 25px;
    margin-bottom: 15px;
    margin-top: 20px;
  }

  .chapter-content-item .chapter-content-content {
    text-align: left;
    text-indent: 2em;
    line-height: 23px;
  }

  .chapter-content-item .chapter-content-content >>> p {
    margin-top: 15px;
  }

  /*.scrollerWrap .scrollerContent {*/
  /*  height: 100%;*/
  /*  width: 100%;*/
  /*}*/

</style>

